<template>
	<view class="cu-bar search" :class="cls" @click="click">
		<slot name="left"></slot>
		<view class="search-form round">
			<text :class="iconClass"></text>
			<input type="text" v-model="searchInput" :disabled="read" :placeholder="holder" confirm-type="search" @confirm="search" />
		</view>
		<view class="action">
			<button class="cu-btn" :class="button.cls" v-if="button && typeof button === 'object'" @click.stop="search">{{button.text}}</button>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否只读（点击直接跳转）
			read: {
				type: Boolean,
				default() {
					return false
				}
			},
			holder: {
				type: String,
				default() {
					return '请输入搜索关键字'
				}
			},
			// 是否展示搜索图标
			icon: {
				type: Boolean,
				default() {
					return true
				}
			},
			// 是否显示button
			button: {
				type: Object | Boolean,
				default() {
					return {
						cls: [],
						text: '搜索'
					}
				}
			},
			// 搜索图标class
			iconCls: {
				type: Array | String,
				default() {
					return []
				}
			},
			// 包裹class
			cls: {
				type: Array | String,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				searchInput: ''
			}
		},
		computed: {
			iconClass() {
				if (this.icon) {
					return this.iconCls.concat(['cuIcon-search'])
				}
				return this.iconCls
			}
		},
		methods: {
			click() {
				this.$emit('click', this.searchInput)
			},
			search() {
				this.$emit('search', this.searchInput)
			}
		}
	}
</script>

<style>
</style>
